<template>
  <el-dialog :visible="visible" @close="$emit('close')" title="调研工作安排-手动录入" width="80%">
    <jdf-dynamic-table
      ref="dynamicTable"
      v-model="tableData"
      :tableDataOption="tableDataOption"
      :selection="selection"
      :serialNoCol="serialNoCol"
      :operation="operation"
      :btnIsTop="false"
      :importAttrs="importAttrs"
      title-align="center"
      :isEdit="isEdit"
      :addFun="addFun"
      @valueChange="valueChange"
      @importCallback="importCallback"
      @selectionChange="handleSelectionChange"
    ></jdf-dynamic-table>
    <span slot="footer" class="dialog-footer">
    <el-button @click="$emit('close')">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
  </el-dialog>
</template>

<script>
import { DEFAULT_DATE_FORMAT } from '@/utils/constants';
import { getStorageInfo } from '@/api/utils/storage-util';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      nameColElType: 'input',
      isEdit: true,
      selection: true,
      selectionFixed: true,
      serialNoCol: true,
      serialNoColFixed: true,
      // 导入文件配置，'import-func'和'download-template-func'会覆盖v-bind中同名方法，为兼容保留原方法
      importAttrs: {
        'import-func': this.importFunc,
        'download-template-func': this.downLoadTemplate,
        'auto-upload': true,
        'download-template': true,
      },
      operation: ['add', 'delete', 'import', 'edit'],
      tableData: [],
      tableDataOption: [
        {
          label: '调研日期',
          key: 'researchStartDate',
          elType: 'DatePicker',
          width: 300,
          attrs: {
            placeholder: '请选择调研起止日期',
            type: 'daterange',
            'range-separator': '至',
            'start-placeholder': '开始日期',
            'end-placeholder': '结束日期',
            format: DEFAULT_DATE_FORMAT,
            valueFormat: DEFAULT_DATE_FORMAT,
          },
          rules: [{ required: true, message: '请选择调研日期', trigger: 'change' }],
          event: {
            change: () => {}
          }
        },
        {
          label: '带队领导',
          key: 'leadingUserName',
          elType: 'groupIdentity',
          width: 150,
          treeAttrs: {
            identityId: getStorageInfo('identityId'),
            groupCode: 'DY_TJZ_COMPANY_LEADER',
            dialogTitle: '选择带队领导',
            filterable: true, // 是否可搜索，默认false
          }
        },
        {
          label: '调研对象',
          key: 'researchUnitName',
          elType: 'groupOrg',
          width: 150,
          treeAttrs: {
            identityId: getStorageInfo('identityId'),
            groupCode: 'DY_COMPANIES_FORM',
            dialogTitle: '选择调研对象',
            filterable: true, // 是否可搜索，默认false
          }
        },
        {
          label: '牵头部门',
          key: 'leadingDepartmentIds',
          elType: 'groupOrg',
          width: 200,
          treeAttrs: {
            identityId: getStorageInfo('identityId'),
            groupCode: 'DY_HOT_DEPT',
            dialogTitle: '选择牵头部门',
            filterable: true, // 是否可搜索，默认false
          }
        },
        {
          label: '调研主题',
          key: 'researchSubject',
          elType: 'input',
          width: 300,
          rules: [{ required: true, message: '请输入调研主题', trigger: 'blur' }],
          attrs: {
            type: 'textarea',
            'show-word-limit': true,
            maxlength: '100',
            placeholder: '请输入调研主题',
          }
        },
        {
          label: '连带规范性动作类别',
          key: 'normativeType',
          elType: 'input',
          width: 300,
        },
        {
          label: '备注',
          key: 'remark',
          width: 300,
          attrs: {
            type: 'textarea',
            'show-word-limit': true,
            maxlength: '100',
            placeholder: '请输入备注',
          }
        }
      ],
    };
  },

  methods: {
    /**
     * 下载模板方法
     */
    downLoadTemplate() {
      alert('下载模板');
    },
    /**
     * 导入方法
     */
    importFunc(formData) {
      alert('导入成功');
    },
    /*
     * 导入回调
     */
    importCallback() {
      alert('导入回调成功');
    },
    valueChange() {},
    addFun(tableList) {},
    handleSelectionChange(rows) {},
    handleClose() {
      this.$emit('update:showAddDialog', false);
    },
    submit() {
      this.$emit('close')
    }
  },
};
</script>
